<template>
  <div>

    <h3>题目列表</h3>

    <el-alert
      v-if="!postForm.groupList || postForm.groupList.length==0"
      title="请点击右侧【添加新的大题】开始添加数据"
      type="info"
    />

    <el-card v-for="(item,ii) in postForm.groupList" :id="item.id || ii" :key="item.id" class="content-card">
      <div slot="header" class="clearfix" style="background: #eee; margin: -20px; padding: 20px">
        <el-input v-model="item.title" size="small" style="width: 200px" />
        <el-button size="small" icon="el-icon-plus" style="margin-left: 10px" @click="openSelectQu(ii)">添加题目</el-button>
        <div style="float: right">

          <el-tooltip class="item" effect="dark" content="考试时生成的题目顺序是打乱的" placement="bottom">
            <el-checkbox v-model="item.quRand" label="试题乱序" />
          </el-tooltip>

          <el-tooltip class="item" effect="dark" content="考试时生成的ABCD选项内容是打乱的" placement="bottom">
            <el-checkbox v-if="item.quType==='1' || item.quType==='2' || item.quType==='99'" v-model="item.itemRand" label="选项乱序" />
          </el-tooltip>

          <el-tooltip class="item" effect="dark" content="系统默认全部选对才给分，此处设置只要考生选对部分内容，也给相应的分数" placement="bottom">
            <el-checkbox v-if="item.quType==='2' || item.quType==='99'" v-model="item.pathScore" label="漏选也给分" />
          </el-tooltip>

        </div>

      </div>

      <div v-for="(qu,jj) in item.quList" :key="qu.id">
        <div :id="qu.id" class="list-box">
          <div class="list-qu">
            <qu-item-show :value="qu" :index="jj" :mode="3" />

            <!-- 子题目列表 -->
            <div v-if="qu.quType==='99' " style="padding: 20px">

              <div v-for="(sub,sx) in qu.subList" :key="sub.id">

                <div class="sub-box">

                  <div style="flex-grow: 1">
                    <qu-item-show
                      :show-type="true"
                      :value="sub"
                      :index="sx"
                      :mode="3"
                      :state="0"
                      :show-analysis="true"
                      :show-answer="true" />
                  </div>

                  <div class="sub-box-score">
                    <div class="opt-title">本题</div>
                    <el-input-number
                      v-model="sub.score"
                      :min="0"
                      :controls="false"
                      :precision="1"
                      size="mini"
                      style="width: 60px"
                      @keyup.native="calcSub($event, qu, sub)"
                    />
                    <div class="opt-title">分</div>
                  </div>

                </div>

              </div>

            </div>

          </div>
          <div class="list-opt">

            <el-tooltip class="item" effect="dark" content="移除本题" placement="bottom">
              <el-button type="danger" size="mini" icon="el-icon-delete" circle @click="removeItem(item.quList, jj)" />
            </el-tooltip>

            <el-tooltip class="item" effect="dark" content="排序上移" placement="bottom">
              <el-button size="mini" icon="el-icon-top" circle @click="sortUp(item.quList, jj)" />
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="排序下移" placement="bottom">
              <el-button size="mini" icon="el-icon-bottom" circle @click="sortDown(item.quList, jj)" />
            </el-tooltip>

            <div v-if="qu.quType!=='99'" class="opt-box">
              <div>
                <div class="opt-title">本题</div>
                <el-input v-model="qu.score" size="mini" style="width: 60px" />
                <div class="opt-title">分</div>
              </div>

              <div v-if="item.pathScore">
                <el-divider />
                <div v-for="an in qu.answerList" :key="an.id">
                  <div class="opt-title">{{ an.tag }}选项</div>
                  <el-input v-model="an.pathScore" :disabled="!an.isRight" size="mini" style="width: 60px" />
                  <div class="opt-title">分</div>
                </div>
              </div>

            </div>

          </div>

        </div>
      </div>

    </el-card>

    <join1-dialog
      v-if="joinType===1"
      :visible.sync="dialogVisible"
      :qu-type="quType"
      :excludes="excludes"
      @select="handleQuBack"
      @close="dialogVisible = false"
    />

    <qu-select-dialog
      v-if="joinType===2"
      :dialog-show="dialogVisible"
      :qu-type="quType"
      :excludes="excludes"
      :for-exam="true"
      @select="handleQuBack"
      @close="dialogVisible = false"
    />

  </div>

</template>

<script>

import Join1Dialog from '@/views/admin/tmpl/components/components/Join1Dialog'
import QuSelectDialog from '@/views/admin/repo/qu/components/QuSelectDialog'
import QuItemShow from '@/views/admin/repo/qu/components/QuItemShow'
export default {
  name: 'JoinQuList',
  components: { QuItemShow, QuSelectDialog, Join1Dialog },
  props: {
    groupList: Array,
    joinType: Number
  },
  data() {
    return {
      dialogVisible: false,
      excludes: [],
      quType: null,
      postForm: {
        groupList: []
      }
    }
  },
  watch: {

    groupList: {
      handler(val) {
        // 排除选定题目
        this.calcScore(val)
      },
      deep: true
    }
  },
  created() {
    this.postForm.groupList = this.groupList
    this.postForm.joinType = this.joinType
  },
  methods: {

    // 计算子题目总分数
    calcSub(e, qu, sub) {
      const subList = qu.subList
      let total = 0
      for (let i = 0; i < subList.length; i++) {
        if (subList[i].quId === sub.quId) {
          let score = 0

          // 传入触发更新
          if (e.target.value) {
            score = e.target.value * 1
          }

          total = this.$calc.add(total, score)
        } else {
          total = this.$calc.add(total, subList[i].score)
        }
      }
      // 题目分数
      qu.score = total
    },

    // 重新计算分数
    calcScore(groupList) {
      const excludes = []
      for (let i = 0; i < groupList.length; i++) {
        const quList = groupList[i].quList
        for (let j = 0; j < quList.length; j++) {
          excludes.push(quList[j].quId)
        }
      }
      this.excludes = excludes
    },

    // 打开选择窗口
    openSelectQu(index) {
      this.quType = this.postForm.groupList[index].quType
      this.index = index
      this.dialogVisible = true
    },

    // 选定试题回调
    handleQuBack(data) {
      // 关闭弹窗
      this.dialogVisible = false

      if (data == undefined || !data || data.length == 0) {
        return
      }

      const list = this.postForm.groupList[this.index].quList

      for (let i = 0; i < data.length; i++) {
        const qu = data[i]
        const subList = []

        // 处理一下答案列表
        const fixedAnswers = []
        for (let j = 0; j < qu.answerList.length; j++) {
          const a = qu.answerList[j]
          fixedAnswers.push({ answerId: a.id, content: a.content, analysis: a.analysis, isRight: a.isRight, tag: a.tag, image: a.image, pathScore: 0 })
        }

        // 组合题
        if (qu.quType === '99') {
          for (let k = 0; k < qu.subList.length; k++) {
            const sub = qu.subList[k]

            const subAnswers = []

            for (let l = 0; l < sub.answerList.length; l++) {
              const a = sub.answerList[l]
              subAnswers.push({ answerId: a.id, content: a.content, analysis: a.analysis, isRight: a.isRight, tag: a.tag, image: a.image, pathScore: 0 })
            }

            subList.push({ quId: sub.id, quType: sub.quType, quType_dictText: sub.quType_dictText, content: sub.content, score: 0, sort: k + 1, child: 1, answerList: subAnswers })
          }
        }

        // 重构题目信息
        const item = {
          quId: qu.id,
          quType: qu.quType,
          quType_dictText: qu.quType_dictText,
          content: qu.content,
          analysis: qu.analysis,
          score: 0,
          answerList: fixedAnswers,
          leftList: qu.leftList,
          rightList: qu.rightList,
          answerGroup: qu.answerGroup,
          subList: subList
        }
        list.push(item)
      }
    },

    // 移除题目
    removeItem(list, index) {
      list.splice(index, 1)
    },

    // 题目排序-向下
    sortDown(list, index) {
      const newIndex = index + 1
      const targetIndex = list.splice(index, 1)[0]
      list.splice(newIndex, 0, targetIndex)
    },

    // 题目排序-向下
    sortUp(list, index) {
      const newIndex = index - 1
      const targetIndex = list.splice(index, 1)[0]
      list.splice(newIndex, 0, targetIndex)
    }
  }
}
</script>

<style scoped>

.content-card{
  margin-bottom: 20px;
  line-height: 28px;
}

.opt-box{
  background: #eee;
  padding: 10px;
  text-align: center;
  margin-top: 10px;
  width: 180px;
  float: right;
}

.opt-title{
  width: 42px;
  display: inline-block;
  text-align: center;
}

.sub-item{
  display: flex;
  font-size: 14px;
  align-items: center;
  background: #efefef;
  margin-bottom: 2px;
  padding: 0px 10px
}

.sub-title{
  flex-grow: 1;
  display: flex;
  align-items: center
}

.sub-box{
  display: flex;
  width: 100%;
  border: #eee 1px solid;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 10px
}

.sub-box-score {
  width: 150px;
  display: flex;
  justify-content: flex-end;
}

</style>
